<template>
  <div id="app">
    <keep-alive>
      <router-view></router-view>
    </keep-alive>
    <div class="app-navigation" v-if="tabIdx">
      <mu-paper :z-depth="3">
        <mu-bottom-nav :value="tabIdx">
          <mu-bottom-nav-item tag="span" :value="1" title="健康档案" icon="attach_file" to="/"></mu-bottom-nav-item>
          <mu-bottom-nav-item tag="span" :value="2" title="个人中心" icon="perm_identity" to="/person"></mu-bottom-nav-item>
        </mu-bottom-nav>
      </mu-paper>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'App',
  computed: {
    ...mapState([
      'tabIdx'
    ])
  }
}
</script>

<style lang="stylus">
  .app-navigation
    position: fixed
    left: 0
    right: 0
    bottom: 0
    height: 1.12rem
</style>
